<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/16
  Time: 16:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  pageEncoding="utf-8"%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<%  request.setCharacterEncoding("utf-8"); %>
<script src="${pageContext.request.contextPath}/static/layui/layui.all.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script type="text/html" id="btnDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<div id="modleBox" style="display: none; margin: auto">
    <form id="frm" enctype="multipart/form-data" >
        商品名:<input type="text" name="gname"><br>
        类型:<input type="text" name="gtype"><br>
        商品价格:<input type="text" name="gprice"><br>
        评价:<input type="text" name="gstar"><br>
        好评数:<input type="text" name="gGoodsNum"><br>
        图片:<input type="file" name="gpic"><br>
        图片:<input type="text" name="gpic1"><br>
        图片:<input type="text" name="gpic2"><br>
        图片:<input type="text" name="gpic3"><br>
        商品信息:<input type="text" name="ginfo"><br>
        内存版本1:<input type="text" name="gneicun1"><br>
        内存版本2:<input type="text" name="gneicun2"><br>
        颜色1:<input type="text" name="gcolor1"><br>
        颜色2:<input type="text" name="gcolor2"><br>
        <fieldset class="layui-elem-field site-demo-button" style="margin: auto; border: solid 0px">
            <div style="margin-left: 160px">
                <button type="submit" class="layui-btn layui-btn-normal">提交</button>
            </div>
        </fieldset>
    </form>
</div>
<script type="text/javascript">
    var tableRold;
    layui.use('table', function () {
        var table = layui.table;
        //执行渲染
        tableRold=table.render({
            page: true,
            url: '/goods/all'
            , elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
            ,toolbar: '#btnDemo'
            , width: 1000 //容器高度
            , cols: [[ //标题栏
                {checkbox: true, fixed: true}
                ,{field: 'gid', title: 'ID', width: 80}
                , {field: 'gname', title: '商品名', width: 120,edit:'text'}
                , {field: 'gtype', title: '类型', width: 120,edit:'text'}

                , {field: 'gprice', title: '商品价格', width: 120,edit:'text'}
                , {field: 'gstar', title: '评价', width: 120,edit:'text'}
                , {field: 'gGoodsNum', title: '好评数', width: 120,edit:'text'}
                , {field: 'gpic', title: '图片1', width: 120,edit:'text'}
                , {field: 'gpic1', title: '图片2', width: 120,edit:'text'}
                , {field: 'gpic2', title: '图片3', width: 120,edit:'text'}
                , {field: 'gpic3', title: '图片4', width: 120,edit:'text'}
                , {field: 'ginfo', title: '商品信息', width: 120,edit:'text'}
                , {field: 'gneicun1', title: '内存版本1', width: 120,edit:'text'}
                , {field: 'gneicun2', title: '内存版本2', width: 120,edit:'text'}
                , {field: 'gcolor1', title: '颜色1', width: 120,edit:'text'}
                , {field: 'gcolor2', title: '颜色2', width: 120,edit:'text'}
                ,{field:'right', title: '操作', width:200,align:'center', toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'
            ,page: true//设置表头
            //,…… //更多参数参考右侧目录：基本参数选项
        });
        table.on('tool(test)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                $.ajax({
                    type: "post",
                    url: "/goods/update",
                    data: {
                        gid:data.gid,
                        gname:data.gname,
                        gtype:data.gtype,
                        gprice:data.gprice,
                        gstar:data.gstar,
                        gGoodsNum:data.gGoodsNum,
                        gpic:data.gpic,
                        gpic1:data.gpic1,
                        gpic2:data.gpic2,
                        gpic3:data.gpic3,
                        ginfo:data.ginfo,
                        gneicun1:data.gneicun1,
                        gneicun2:data.gneicun2,
                        gcolor1:data.gcolor1,
                        gcolor2:data.gcolor2,

                    },
                    success: function (msg) {
                        alert(msg.msg);
                        tableRold.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }})
                    },
                    dataType:'json'
                });
            }else if(obj.event === 'del'){

                var id=data.gid;
                $.ajax({
                    type:"get",
                    url:"/goods/del/"+id,
                   /* data:id,*/
                    success:function (msg) {
                        alert("删除成功");
                        tableRold.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    },
                    dataType:"json"

                })
            }
        });
        /*table.on('checkbox(test)', function(obj){
            alert(obj.data.uid);
        })*/
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            /*alert(data.uid);*/
            if(obj.event === 'del'){
                var idArry=data[0].uid;
                for(var i=1;i<data.length;i++){
                    idArry+=","+data[i].uid;
                }
                alert(idArry);
                $.ajax({
                    type:"GET",
                    url:"/goods/dels",
                    data:idArry,
                    success:function (mess) {
                        //window.location=mess;
                        alert(mess.msg);
                        tableRold.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    },
                    dataType:"json"
                });
            }else if(obj.event === 'add'){
                layui.use(['layer'],function () {
                    var layer = layui.layer,$=layui.$;
                    layer.open({
                        type: 1
                        ,area:['400PX','300PX']
                        , content: $('#modleBox')
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        ,zIndex:layer.zIndex
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                });
            }
        });
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        }); alert(data[i].id);
       $(function () {
           $("#frm").submit(function () {

               $.ajax({
                   typr:"post",
                   url:"/goods/add",
                   data:"$('#frm').serialize()",
                   success:function (data) {
                       layer.closeAll();
                       tableRold.reload({
                           page: {
                               curr: 1 //重新从第 1 页开始
                           }
                       });
                   },
                   dataType:"json"
               })
               return false;
           })
       })
    });

</script>
</body>
</html>
